<div class="textbox-container">
    <div class="input active">
        <div class="file-input-outer"></div>    
        <div id="lastfile"></div>
        <div id="formats"></div>
    </div>
    
    <div class="message-panel hidden">
            <div class="close-message-panel"><i class="fa fa-times"></i></div>
            <div class="message-content"></div>
    </div>
    
    <div id="textbox"  class="mousetrap" contenteditable="true">
        <p data-l10n-id="d-txt1">Enter your transcript here...</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p data-l10n-id="d-txt2">Protips:</p>
        <p>&nbsp;</p>
        <p data-l10n-id="d-txt3">- <em>Ctrl+I</em> adds <em>italic</em> formatting and <b>Ctrl+B</b> adds <b>bold</b> formatting.</p>
        <p data-l10n-id="d-txt4">- Press ESC to play/pause, and Ctrl+J to insert the current timestamp.<p>
    </div>
    
    <div class="text-panel">
        <button class="sbutton bold" onclick="document.execCommand('bold',false,null);">
            <i class="fa fa-bold" id="icon-b"></i><span class="label" data-shortcut="bold">ctrl+b</span>
        </button>
        <button class="sbutton italic" onclick="document.execCommand('italic',false,null);">
            <i class="fa fa-italic" id="icon-i"></i><span class="label" data-shortcut="italic">ctrl+i</span>
        </button>
        <button class="sbutton time" onclick="window.insertTimestamp();">
            <i class="fa fa-clock-o"></i><span class="label" data-shortcut="addTimestamp">ctrl+j</span>
        </button>
        <div class="wordcount">
            <span class="wc-text">words</span>        
        </div>
        <button class="sbutton backup">
            <i class="fa fa-history"></i><span class="label" data-l10n-id="history-button">history</span>
        </button>
        <div class="import-file-wrapper">
            <button class="sbutton import">
                <i class="fa fa-sign-in" id="icon-imp"></i><span class="label" data-l10n-id="import-button">Import</span>
            </button>
            <input id="local-file-import" type="file" name="file" accept=".otr"  />
        </div>
        <button class="sbutton export">
            <i class="fa fa-share-square-o" id="icon-exp"></i><span class="label" data-l10n-id="export">Export</span>
            
        </button>
                
                
        
    </div>
    <div class="export-panel">
        <div class="export-title" data-l10n-id="export-download">Download transcript as...</div>
        <a class="export-block-md" id="x-md" target="_blank"  data-l10n-id="export-markdown">Markdown (.md)</a>
        <a class="export-block-txt" id="x-txt" target="_blank" data-l10n-id="export-text">Plain text (.txt)</a>
        <a class="export-block-txt" id="x-otr" target="_blank" data-l10n-id="export-otr">oTranscribe format (.otr)</a>
        <div class="export-title" data-l10n-id="export-send">Send transcript to...</div>
        <a class="export-block-gd unauth" id="x-gd" target="_blank" href="javascript:void(0);">
            Google Drive
            <div class="sign-in" data-l10n-id="sign-in" id="x-gd-sign">Sign in</div>
        </a>
    </div>
    
    <div class="backup-panel">
        <div class="backup-description">
            <div class="backup-close"><i class="fa fa-times"></i></div>
            <div class="backup-title" data-l10n-id="history-title">Transcript history</div>
            <div class="backup-instructions" data-l10n-id="history-instrux-v2">A copy of your work is saved every five minutes. Backups are not stored for very long. Press Ctrl+S to save at any time.</div>
        </div>
        <div class="backup-window"><!-- backup blocks go here --></div>
    </div>
</div>
